<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>002_Working_With_Colors</title>
  </head>
  <body>
    <!-- Default colors -->
    <!-- white, black, red, green, blue, orange, yellow, purple, lime, emerald, teal, cyan, indigo, violet, fuchsia, pink, rose, sky, gray, slate, zinc, neutral, stone, amber,  -->

    <!-- Text Colors -->
    <p class="text-black">TailWindCss 真的太棒了</p>
    <p class="text-white bg-black">TailWindCss 真的太棒了</p>
    <p class="text-red-500">TailWindCss 真的太棒了</p>
    <p class="text-red-300">TailWindCss 真的太棒了</p>
    <p class="text-green-500">TailWindCss 真的太棒了</p>
    <p class="text-yellow-400">TailWindCss 真的太棒了</p>
    <!-- Background Colors -->
    <p class="bg-slate-800 text-white">TailWindCss 真的太棒了</p>
    <p class="bg-emerald-400">TailWindCss 真的太棒了</p>
    <p class="bg-yellow-300">TailWindCss 真的太棒了</p>
    <p class="bg-indigo-800 text-white">TailWindCss 真的太棒了</p>
    <!-- Text Underline -->
    <p class="text-red-300 underline">TailWindCss 真的太棒了</p>
    <p class="text-green-500 underline decoration-blue-500">TailWindCss 真的太棒了</p>
    <p class="text-yellow-400 underline decoration-pink-300">TailWindCss 真的太棒了</p>
    <!-- Border Colors -->
    <div class="w-12 h-5 border border-blue-400">122</div>
    <input type="text" class="border border-purple-400 placeholder-orange-500" placeholder="(>^ω^<)喵" />
    <!-- Divide Colors -->
    <div class="divide-y divide-blue-500">
      <div>item1</div>
      <div>item2</div>
      <div>item3</div>
    </div>
    <div class="flex justify-evenly divide-x-2 divide-orange-400">
      <div>item4</div>
      <div>item5</div>
      <div>item6</div>
    </div>
    <!-- Outline Colors -->
    <button class="outline outline-green-500">Hello</button>
    <button class="outline outline-blue-400">Hello</button>
    <!-- Box Shadow Colors (Opacity defaults to 100, but you can set it)-->
    <button class="shadow-lg bg-orange-300 shadow-orange-300">猫南北</button>
    <button class="shadow-lg bg-blue-400 shadow-blue-500/80 rounded-lg text-white">猫南北</button>
    <!-- Accent Colors -->
    <br />
    <input type="checkbox" class="accent-purple-500" checked />
    <input type="checkbox" class="accent-cyan-400" checked />
    <!-- Arbitrary Colors -->
    <br />
    <button class="text-white bg-[#409EFF] rounded w-28 h-10 shadow-lg shadow-[#409EFF]">Tail</button>
    <button class="text-white bg-[#67C23A] rounded w-28 h-10 shadow-lg shadow-[#67C23A]">Wind</button>
    <button class="text-white bg-[#E6A23C] rounded w-28 h-10 shadow-lg shadow-[#E6A23C]">Css</button>
    <button class="text-white bg-[#F56C6C] rounded w-28 h-10 shadow-lg shadow-[#F56C6C]">大西瓜</button>
  </body>
</html>
